<template>
  <div class="page-container">
    <!-- 顶部卡片 -->
    <a-card class="header-card">
      <div class="header-content">
        <h2 class="page-title">消息通知</h2>
        <div class="header-right">
          <a-button type="primary" @click="$router.back()">返回</a-button>
        </div>
      </div>
    </a-card>

    <!-- 消息列表 -->
    <a-card class="notification-card">
      <template #extra>
        <a-space>
          <a-button type="link" @click="handleReadAll">全部已读</a-button>
          <a-button type="link" @click="handleClearAll">清空消息</a-button>
        </a-space>
      </template>
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="unread" tab="未读消息">
          <a-list
            :loading="loading"
            :data-source="unreadList"
            :pagination="pagination"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #avatar>
                    <a-badge status="processing" v-if="!item.read" />
                    <notification-outlined />
                  </template>
                  <template #title>
                    {{ item.title }}
                  </template>
                  <template #description>
                    <div class="notification-content">
                      {{ item.content }}
                    </div>
                    <div class="notification-time">
                      {{ item.time }}
                    </div>
                  </template>
                </a-list-item-meta>
                <template #extra>
                  <a-button type="link" @click="handleRead(item)">标记已读</a-button>
                </template>
              </a-list-item>
            </template>
            <template #empty>
              <a-empty description="暂无未读消息" />
            </template>
          </a-list>
        </a-tab-pane>
        <a-tab-pane key="all" tab="全部消息">
          <a-list
            :loading="loading"
            :data-source="allList"
            :pagination="pagination"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #avatar>
                    <notification-outlined />
                  </template>
                  <template #title>
                    <span :class="{ 'text-read': item.read }">{{ item.title }}</span>
                  </template>
                  <template #description>
                    <div class="notification-content">
                      {{ item.content }}
                    </div>
                    <div class="notification-time">
                      {{ item.time }}
                    </div>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
            <template #empty>
              <a-empty description="暂无消息" />
            </template>
          </a-list>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import { NotificationOutlined } from '@ant-design/icons-vue'
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getNotifications, readNotification, readAllNotifications, clearNotifications } from '@/api/notification'

export default {
  name: 'Notification',
  components: {
    NotificationOutlined
  },
  setup() {
    const loading = ref(false)
    const activeTab = ref('unread')
    const unreadList = ref([])
    const allList = ref([])
    const pagination = ref({
      pageSize: 10,
      current: 1,
      total: 0,
      onChange: (page) => {
        pagination.value.current = page
        fetchNotifications()
      }
    })

    // 获取消息列表
    const fetchNotifications = async () => {
      loading.value = true
      try {
        const res = await getNotifications({
          page: pagination.value.current,
          pageSize: pagination.value.pageSize,
          type: activeTab.value
        })
        if (activeTab.value === 'unread') {
          unreadList.value = res.data.list
        } else {
          allList.value = res.data.list
        }
        pagination.value.total = res.data.total
      } catch (error) {
        message.error('获取消息列表失败')
      } finally {
        loading.value = false
      }
    }

    // 标记单条消息已读
    const handleRead = async (item) => {
      try {
        await readNotification(item.id)
        message.success('已标记为已读')
        fetchNotifications()
      } catch (error) {
        message.error('操作失败')
      }
    }

    // 标记全部已读
    const handleReadAll = async () => {
      // try {
      //   await readAllNotifications()
      //   message.success('已全部标记为已读')
      //   fetchNotifications()
      // } catch (error) {
      //   message.error('操作失败')
      // }
    }

    // 清空消息
    const handleClearAll = async () => {
      try {
        await clearNotifications()
        message.success('已清空消息')
        fetchNotifications()
      } catch (error) {
        message.error('操作失败')
      }
    }

    onMounted(() => {
      fetchNotifications()
    })

    return {
      loading,
      activeTab,
      unreadList,
      allList,
      pagination,
      handleRead,
      handleReadAll,
      handleClearAll
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 40px 24px;
  min-height: 100vh;
  background: #f0f2f5;
}

.header-card {
  max-width: 1400px;
  margin: 0 auto 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

:deep(.header-card .ant-card-body) {
  padding: 12px 24px;
}

.page-title {
  margin: 0;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
}

.notification-card {
  max-width: 1400px;
  margin: 0 auto;
}

.notification-content {
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 4px;
}

.notification-time {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

.text-read {
  color: rgba(0, 0, 0, 0.45);
}

:deep(.ant-list-item-meta-avatar) {
  display: flex;
  align-items: center;
}
</style> 